<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-size: 16px">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px"
        >我的收藏院校</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div style="margin-top: 20px" id="collegeCollection">
      <el-button
        @click="toggleSelection()"
        style="background-color: rgba(255, 101, 0); color: #fff"
        >取消收藏</el-button
      >
    </div>
    <el-table
      :data="userData"
      style="width: 1021px; margin-top: 10px"
      ref="multipleTable"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      :header-cell-style="headClass"
    >
      >
      <el-table-column label="全选" type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="院校名称" width="350" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在地区" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.province }}</span>
        </template>
      </el-table-column>
      <el-table-column label="院校类型" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.category }}</span>
        </template>
      </el-table-column>
      <el-table-column label="办学类型" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="院校特色" align="center">
        <template slot-scope="scope">
          <!-- <el-tag>{{ scope.row.ts }}</el-tag> -->
          <el-tag v-if="scope.row.is985 !== null">{{ scope.row.is985 }}</el-tag>
          <el-tag v-if="scope.row.is211 !== null" type="warning">{{
            scope.row.is211
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-size="queryInfo.pagesize"
      layout="total, prev, pager, next"
      :total="queryInfo.count"
      background
      style="
        position: relative;
        width: 300px;
        margin-left: -150px;
        left: 50%;
        margin-top: 10px;
      "
    >
    </el-pagination>
  </el-card>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      // 多选
      multipleSelection: [],
      //初始分页条件
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
        count: 0,
      },
      // 保存请求回来的用户列表数据
      userData: [
        {
          is211: "211",
          is985: "985",
          name: "清华大学1",
          province: "北京",
        },
      ],
    };
  },
  methods: {
    toggleSelection(rows) {
      let uniList = [];
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.multipleSelection.forEach((row) => {
          uniList.push(row.unvId);
        });
        console.log(uniList);
        this.$axios
          .delete("/deleteBatchCollection", {
            data: {
              list: uniList,
            },
          })
          .then((res) => {
            this.$axios
              .get("/userCollection", {
                params: {
                  page: this.queryInfo.pagenum,
                  size: this.queryInfo.pagesize,
                },
              })
              .then((res) => {
                console.log(res);
                this.userData = res.data.data;
                this.queryInfo.count = res.data.code;
              });
          });
        console.log(this.multipleSelection);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表格表头
    headClass() {
      //表头居中显示
      return "font-size:16px;text-align:center";
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCurrentChange(page) {
      this.queryInfo.pagenum = page;
      console.log(this.queryInfo.pagenum);
      //   this.getUniList_TokenLists();
      console.log("跳转了");
      // 重新按照pagenum发送请求 请求最新的数据
      if (this.collegeName === "") {
        this.getUniList_Token();
      } else {
        this.$axios
          .get("/back/university/" + this.collegeName, {
            params: {
              name: this.collegeName,
              page: this.queryInfo.pagenum,
              size: this.queryInfo.pagesize,
            },
          })
          .then((res) => {
            console.log(res);
            this.userData = res.data.data;
            this.queryInfo.count = res.data.code;
          });
      }
    },
  },
  // 初始化个人信息
  created() {
    const token = window.sessionStorage.getItem("tokenvalue");
    this.$axios.defaults.headers.common["satoken"] = token;
    this.$axios
      .get("/userCollection", {
        params: {
          page: this.queryInfo.pagenum,
          size: this.queryInfo.pagesize,
        },
      })
      .then((res) => {
        console.log(res);
        this.userData = res.data.data;
        this.queryInfo.count = res.data.code;
      });
  },
};
</script>

<style scoped>
.box-card {
  width: 1100px;
  /* height: 2100px; */
  margin: 20px auto;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
</style>